<template>
  <div class="home dark-mode">
    <div class="header">
      <div class="logo">
        <div class="img">
          <img src="./img/logo.png" alt="" />
        </div>
        监测一张网
      </div>

      <div class="list">
        <div
          v-for="(item, index) in list"
          class="list-detail"
          :class="{ active: $route.meta.navActive === item.value }"
          :key="index"
          @click="navClick(item.value)">
          <div class="icon">
            <Icon size="20" :type="item.icon" />
          </div>
          <div class="text">{{item.text}}</div>
        </div>
      </div>

      <!-- <div class="notice">
        <Badge :count="matterList.length">
          <Icon
            size="26"
            type="md-notifications" />
        </Badge>
      </div> -->
    </div>

    <div class="wrapper">
      <router-view />
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { dataItems } from 'common/js/modules'

export default {
  computed: {
    ...mapState({
      total: state => state.home.total,
    })
  },
  created () {
    this.initNav()
    this.initTotal()
  },
  mounted () {
    // this.initTotal()
  },
  data () {
    return {
      list: [],
      matterList: []
    }
  },
  methods: {
    initNav () {
      const arr = [
        { icon: 'md-home', text: '首页', value: 'homeMap' },
        { icon: 'md-pulse', text: '监测情况', value: 'realtime' },
        { icon: 'md-settings', text: '统计分析', value: 'statistics' },
        { icon: 'md-desktop', text: '设备管理', value: 'device' },
        { icon: 'md-people', text: '设备单位管理', value: 'company' },
        { icon: 'md-clipboard', text: '工单管理', value: 'work' },
        { icon: 'md-checkbox', text: '巡检管理', value: 'check' },
        // { icon: 'md-barcode', text: '数据源监控', value: 'library' },
      ]

      this.list = arr
    },
    navClick (value) {
      this.$router.push(`/home/${value}`)
    },
    initTotal () {
      const list = dataItems()
      
      list.map(item => {
        setTimeout(() => {
          this.GET_TOTAL(item.value)
        }, 800)
      })
    },
    ...mapActions({
      'GET_TOTAL': 'home/GET_TOTAL'
    }),
  }
}
</script>

<style lang="scss">
@import 'common/scss/color';

.home {
  >.header {
    > .notice {
      .ivu-badge-count {
        background: #FFFFFF !important;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@import 'common/scss/color';

.home {
  width: 100%;
  height: 100%;
  position: relative;
  > .header {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    background-color: $Color-light-card;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    padding: 0 15px;
    box-sizing: border-box;
    position: relative;
    z-index: 999;
    > .logo {
        flex: 0 0 400px;
        height: 100%;
        display: flex;
        align-items: center;
        overflow: hidden;
        cursor: pointer;
        font-size: 26px;
        font-weight: 800;
        color: $Color-primary;
        letter-spacing: 2px;
      > .img {
        flex: 0 0 55px;
        height: calc(100% - 20px);
        text-align: center;
        margin-right: 3px;
        > img {
          height: 100%;
        }
      }
    }
    > .list {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        > .list-detail {
          flex: 0 0 130px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          position: relative;
          transition: all 0.3s ease;
          
          &:nth-last-of-type(1) {
            flex: 0 0 120px;
          }
          
          > .icon {
              margin-right: 8px;
              > .ivu-icon {
                color: $Color-text-secondary;
                transition: all 0.3s ease;
              }
            }
            
            > .text {
              color: $Color-text-secondary;
              font-size: 16px;
              font-weight: 500;
              transition: all 0.3s ease;
            }
            
            &.active, &:hover {
              background: rgba($Color-primary, 0.1);
              
              > .icon {
                > .ivu-icon {
                  color: $Color-primary;
                  transform: scale(1.1);
                }
              }
              
              > .text {
                color: $Color-primary;
                font-weight: 600;
              }
              
              &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 3px;
                background: linear-gradient(90deg, transparent, $Color-primary, transparent);
                border-radius: 3px;
              }
            }
            
            &.active {
              > .icon {
                > .ivu-icon {
                  color: $Color-primary;
                  text-shadow: 0 0 8px rgba($Color-primary, 0.3);
                }
              }
              
              > .text {
                color: $Color-primary;
                text-shadow: 0 0 8px rgba($Color-primary, 0.3);
              }
            }
        }
      }
    > .notice {
      margin-right: 20px;
      cursor: pointer;
      position: relative;
      
      .ivu-badge-count {
          box-shadow: 0 0 8px 0 rgba(239, 68, 68, 0.8);
        }
        
        &:hover {
          > .ivu-icon {
            color: #FFFFFF !important;
            text-shadow: 0 0 8px rgba(#FFFFFF, 0.5);
          }
        }
    }
  }
  > .wrapper {
    width: 100%;
    height: calc(100% - 60px);
    position: relative;
    overflow: hidden;
  }
}
</style>
